@import '@/styles/variables.less';
@import '@/styles/mixins.less';

.video-tool-modal {
  width: 100%;
  max-width: 600px;
  background: white;
  border-radius: @border-radius-xl;
  box-shadow: @shadow-2xl;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &__header {
    .flex-between();
    align-items: center;
    padding: @spacing-lg @spacing-xl;
    border-bottom: 1px solid @gray-200;
    background: @gray-50;
    flex-shrink: 0;
  }

  &__title {
    .flex-start();
    align-items: center;
    gap: @spacing-sm;

    h2 {
      margin: 0;
      font-size: @font-size-xl;
      font-weight: 600;
      color: @gray-900;
    }
  }

  &__content {
    padding: @spacing-xl;
    overflow-y: auto;
    flex: 1;
  }

  &__description {
    .flex-start();
    align-items: flex-start;
    gap: @spacing-sm;
    padding: @spacing-md;
    background: @blue-50;
    border: 1px solid @blue-200;
    border-radius: @border-radius-lg;
    margin-bottom: @spacing-lg;

    p {
      margin: 0;
      color: @blue-800;
      font-size: @font-size-sm;
    }
  }

  &__section {
    margin-bottom: @spacing-xl;

    h3 {
      font-size: @font-size-lg;
      font-weight: 600;
      color: @gray-900;
      margin: 0 0 @spacing-md 0;
    }
  }

  &__options {
    margin-bottom: @spacing-xl;

    h4 {
      font-size: @font-size-lg;
      font-weight: 600;
      color: @gray-900;
      margin: 0 0 @spacing-lg 0;
    }
  }

  &__option {
    margin-bottom: @spacing-lg;

    label {
      display: block;
      font-weight: 500;
      color: @gray-700;
      margin-bottom: @spacing-xs;
      font-size: @font-size-sm;
    }

    select,
    input {
      width: 100%;
      padding: @spacing-sm @spacing-md;
      border: 1px solid @gray-300;
      border-radius: @border-radius;
      font-size: @font-size-sm;
      transition: border-color @transition-fast;

      &:focus {
        outline: none;
        border-color: @primary-500;
        box-shadow: 0 0 0 3px @primary-100;
      }
    }
  }

  &__processing {
    background: @gray-50;
    border: 1px solid @gray-200;
    border-radius: @border-radius-lg;
    padding: @spacing-lg;
    margin: @spacing-lg 0;
  }

  &__progress {
    margin-bottom: @spacing-lg;
  }

  &__progress-info {
    .flex-between();
    align-items: center;
    margin-bottom: @spacing-sm;
  }

  &__progress-text {
    font-size: @font-size-sm;
    color: @gray-600;
  }

  &__progress-percent {
    font-size: @font-size-sm;
    font-weight: 600;
    color: @primary-600;
  }

  &__controls {
    .flex-start();
    gap: @spacing-sm;
    justify-content: center;
  }

  &__result {
    background: @green-50;
    border: 1px solid @green-200;
    border-radius: @border-radius-lg;
    padding: @spacing-lg;
    margin: @spacing-lg 0;
  }

  &__result-header {
    .flex-start();
    align-items: center;
    gap: @spacing-sm;
    margin-bottom: @spacing-md;

    h4 {
      margin: 0;
      font-size: @font-size-lg;
      font-weight: 600;
      color: @green-800;
    }
  }

  &__result-info {
    p {
      margin: @spacing-xs 0;
      font-size: @font-size-sm;
      color: @green-700;

      strong {
        font-weight: 600;
      }
    }
  }

  &__actions {
    .flex-end();
    gap: @spacing-sm;
    margin-top: @spacing-xl;
    padding-top: @spacing-lg;
    border-top: 1px solid @gray-200;
  }

  // Error state
  &__error {
    background: @red-50;
    border: 1px solid @red-200;
    border-radius: @border-radius-lg;
    padding: @spacing-lg;
    margin: @spacing-lg 0;

    .flex-start();
    align-items: flex-start;
    gap: @spacing-sm;

    p {
      margin: 0;
      color: @red-800;
      font-size: @font-size-sm;
    }
  }

  // Warning state
  &__warning {
    background: @yellow-50;
    border: 1px solid @yellow-200;
    border-radius: @border-radius-lg;
    padding: @spacing-lg;
    margin: @spacing-lg 0;

    .flex-start();
    align-items: flex-start;
    gap: @spacing-sm;

    p {
      margin: 0;
      color: @yellow-800;
      font-size: @font-size-sm;
    }
  }
}

// Responsive
@media (max-width: 768px) {
  .video-tool-modal {
    max-width: 95vw;
    max-height: 95vh;
    margin: 0 @spacing-sm;

    &__header {
      padding: @spacing-md @spacing-lg;
    }

    &__content {
      padding: @spacing-lg;
    }

    &__title {
      h2 {
        font-size: @font-size-lg;
      }
    }

    &__actions {
      flex-direction: column;

      button {
        width: 100%;
      }
    }
  }
}
